<script lang="ts" setup>
import { useDraw } from '@/hooks/useDraw'
import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
import BorderBox2 from '@/components/basic/BorderBox2.vue'
import { useRoute, useRouter } from 'vue-router'
import { LoadingInstance } from 'element-plus/es/components/loading/src/loading.mjs'
import { ElLoading } from 'element-plus'
/** loading */
const loadingService = ref<LoadingInstance>()
const handleBackMap = () => {
  loadingService.value = ElLoading.service({
    target: '.app-container',
    text: '加载中',
    fullscreen: false,
    customClass: 'full-screen-loading',
    svgViewBox: ' 0 0 100 100',
  })
  nextTick(() => {
    childComponent.value.handleBackMap()
  })
  loadingService.value?.close()
}
const childComponent = ref()
const route = useRoute()
const router = useRouter()
const returnHome = () => {
  if (route.name === 'Home') return
  router.push('/')
}
const routerKey = computed(() => {
  return route.path + Math.random()
})
const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
onMounted(() => {
  windowDraw()
  calcRate()
})
onBeforeUnmount(() => {
  unWindowDraw()
})
</script>

<template>
  <div class="app-container" ref="appRef">
    <div class="app-main-container">
      <router-view v-slot="{ Component, route }" :key="routerKey">
        <component ref="childComponent" :is="Component" :key="route.path" />
      </router-view>
    </div>
    <div class="app-footer">
      <div class="app-footer__container">
        <border-box2 @click="returnHome" v-if="route.name !== 'Home'">
          <span> 首页 </span>
        </border-box2>
        <border-box2 @click="handleBackMap" v-if="route.name === 'Home'">
          <span> 返回 </span>
        </border-box2>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.app-container {
  background-color: #000;
  width: 3840px;
  height: 2160px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;
}
.app-main-container {
  position: fixed;
  background-image: url(/src/assets/images/bg-main.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
}
.app-footer {
  background-image: url(/src/assets/images/bg-footer.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: fixed;
  width: 100%;
  height: 8.33%;
  bottom: 0;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  &__container {
    width: 10%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
}
:deep(.full-screen-loading) {
  background-image: url(/src/assets/images/bg-loading.png);
  background-color: #000;
  z-index: 9999999;
}
:deep(.el-loading-text) {
  font-size: 50px;
}
</style>
